<template>
	<view :class="['container', containerClassName]" v-if="quesitonList">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" v-if="navigationBarShow"/>
    <sclDirectoryLoveMbti @ok="nextQeustion" v-if="type == 'love-mbti'" />
    <sclDirectoryJobMbti @ok="nextQeustion" v-else-if="type == 'job-mbti'" />
    <sclDirectoryXgMbti @ok="nextQeustion" v-else-if="type == 'xg-mbti'" />
    <sclDirectoryEq @ok="nextQeustion" v-else-if="type == 'eq'" />
    <sclDirectoryIq @ok="nextQeustion" v-else-if="type == 'iq'" />
    <sclDirectoryCRYL @ok="nextQeustion" v-else-if="type == 'love-cryl'" />
    <!--动物森林-->
    <sclDirectoryAnimalForest @ok="nextQeustion" v-else-if="type == 'animalforest'" />
    <!--BEST性格-->
    <sclDirectoryBestxg @ok="nextQeustion" v-else-if="type == 'bestxg'" />

    <view v-else :style="{backgroundImage: bgImg, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100vh', paddingTop: '100rpx',marginTop:containerClassName=='mentalHealth'?'-50rpx':'0'}">
      <view class="center-box">
        <view class="cb-title-img-wrapper" v-if="containerClassName === 'sexuality'">
          <image class="cb-title-img" :src="staticImgs.sexualityTitleImg" />
          <image class="cb-title-text-img" :src="staticImgs.sexualityTitle" />
        </view>
        <view class="cb-title" v-else>目录</view>
        <scroll-view scroll-y="true" style="height: 58vh;">
          <view class="flex-wrap">
            <view v-for="(item,index) in quesitonList" :class="[isSelectOptn(item)?'cb-item-select':'cb-item','flex-cc']" :key="index"  @click="itemClick(item,index)">
              <view>
                {{index+1}}
              </view>
            </view>
			<view class="" style="height: 190rpx;"></view>
          </view>
        </scroll-view>
      </view>
      <view class="bb-pre-next flex-cc" @click="nextQeustion" v-if="isAllSelect">
        <image class="img" v-if="containerClassName === 'sexuality'" :src="staticImgs.sexualityDirectorySubmitImg" />
        <view v-else>提交</view>
      </view>
    </view>
	</view>
</template>

<script>
  import sclDirectoryIq from './scl-directory-iq.vue';
  import sclDirectoryEq from './scl-directory-eq.vue';
  import sclDirectoryJobMbti from './scl-directory-mbti-job.vue';
  import sclDirectoryLoveMbti from './scl-directory-mbti-love.vue';
  import sclDirectoryXgMbti from './scl-directory-mbti-xg.vue';
  import sclDirectoryCRYL from './scl-directory-cryl.vue';
  import sclDirectoryAnimalForest from './scl-directory-animal-forest.vue'
  

  import sclDirectoryBestxg from './scl-directory-bestxg.vue';
	export default {
    components:{
      sclDirectoryIq,
      sclDirectoryEq,
      sclDirectoryJobMbti,
      sclDirectoryLoveMbti,
      sclDirectoryXgMbti,
      sclDirectoryCRYL,
      sclDirectoryAnimalForest,
      sclDirectoryCRYL,
      sclDirectoryBestxg
    },
		data() {
			return {
        navigationBarDataInfo: {
          "bg_color": "#FFF",
          "color": "#333",
          "flag": 1,
          "name": "题目目录",
          "hasEntity": true
        },
				quesitonList: null,
				isAllSelect:false,
        type:'',
        containerClassName: '',
        staticImgs: {
          depressedBg: this.imgBaseURL + '/scl/question-page-depressed-bg.png',
          sexualityBg: this.imgBaseURL + '/scl/question-page-sexuality-bg.png',
		  goddessBg:this.imgBaseURL + '/scl/question-page/goddess/goddessBg.png',
          mentalHealthBg: this.imgBaseURL + '/scl/question-page-mental-health-bg.png',
          sexualityTitleImg: this.imgBaseURL + '/scl/sexuality-directory-title-img.png',
          sexualityTitle: this.imgBaseURL + '/scl/sexuality-directory-title-text.png',
          sexualityDirectorySubmitImg: this.imgBaseURL + '/scl/sexuality-directory-submit-btn.png',
          queenBg:this.imgBaseURL + '/scl/question-page/queen/bg.png'
        },
        navigationBarShow: false
			}
		},
    computed: {
      // 背景
      bgImg() {
        switch (this.containerClassName) {
          case 'mentalHealth':
            // 个人体检
            return `url(${this.staticImgs.mentalHealthBg})`
          case 'depressed':
            // 抑郁包
            return `url(${this.staticImgs.depressedBg})`
          case 'sexuality':
            // 性取向
            return `url(${this.staticImgs.sexualityBg})`
		  case 'goddess':
		    // 女神节
		    return `url(${this.staticImgs.goddessBg})`
          case 'queen':
            return `url(${this.staticImgs.queenBg})`
          default:
            return 'linear-gradient(to bottom, #99E9A1, #DFFFCB)'
        }
      }
    },
		onLoad(opts) {
      this.type = opts.type
      this.containerClassName = opts.containerClassName
      console.log(this.type,'========dddd')
      
			this.quesitonList = JSON.parse(uni.getStorageSync('questionList'))
			let len=0;
			this.quesitonList.map((item)=>{
        if(item.subjectivity && item.ansOk){
          len++;
        }else{
          item.optnList.forEach((itemOptn)=>{
            if(itemOptn.select&&itemOptn.select=='1'){
              len++;
            }
          })
        }
			})
      
      
      
			if(len==this.quesitonList.length){
				this.isAllSelect = true;
			}
      if (this.type === 'animalforest' || this.type === 'bestxg') {
        this.navigationBarShow = false
      } else {
        this.navigationBarShow = true
      }
		},
		methods: {
			nextQeustion(){
				uni.$emit('submitQuestion');
        uni.navigateBack();
			},
			isSelectOptn(item){
				let isSelect;
        if(item.subjectivity && item.ansOk){
            isSelect = '1';
        }else{
          item.optnList.forEach((itemOptn)=>{
            if(itemOptn.select&&itemOptn.select=='1'){
              isSelect = '1';
            }
          })
        }
				
				return isSelect;
			},
			itemClick(item,index){
				uni.$emit('updateDirectoryIndex',{index:index});
				uni.navigateBack();
			},
      backHandle() {
        uni.navigateBack()
      }
		}
	}
</script>

<style>
	@import url('sclDirectory.css');
</style>